// 入口文件
// 首先 先 引入 Vue模块
import Vue from "vue"
// 引入 最外层的APP组件
import App from "./App.vue"
//1.先确定页面的构成：头部和尾部是不变，中间内容由各个组件相互切换，所以要写APP组件里面  
    // 能用组件  的就用组件，不要自己写 所以 需要引入mint-ui 
 import MintUI from 'mint-ui'; 
 Vue.use(MintUI);   
//  首先 引入 mint-ui 
// import { Header,Swipe, SwipeItem, Toast, Button, Lazyload  } from 'mint-ui';
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload); 


// 因为mint-ui尾部样式太丑，所以就用了MUI的片段了。首先引入css样式
import "./lib/mui/css/mui.min.css"
import "./lib/mui/css/icons-extra.css"

// 导入时间 插件 
import moment from "moment"

// 设置全局的事件 过滤器 ，让全局里面的 时间 固定一个形式  
Vue.filter("dateFormat",function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
    // 在 过滤器中  moment 表示 你输入的时间 .format(pattern),表示当前时间按照什么格式展示
})

// 2. 对于 中间区域 ，需要切换，所以就需要 路由，引入 路由
import VueRouter from "vue-router"
// 让路由 绑定在 Vue上
Vue.use(VueRouter)

// 引入 vuex， 用于 存储 各个组件  共享的 数据
//  导入 vuex包
import Vuex from "vuex"
// 把vuex包 注册到Vue身上
Vue.use(Vuex)
// 初始化 vuex 的实例
// 在 全局设置 car 值，页面一登录 就进行渲染页面
var car = JSON.parse(localStorage.getItem('car') || '[]')
var store = new Vuex.Store({
    state:{
        // 用于 存储共享的 数据 this.$store.state.参数名
        car:car,         //因为购物车不止一个商品，所有要用数组 存储，每个商品有很多信息，所以 数组里面是 对象
    },
    mutations:{
        //  修改 共享的  数据   this.$store.commit("函数名"，一个参数)
        addGoodsTocar(state,goodcar){
            var flge = false //首先 假设 没有相同的商品
            // 在添加购物车时，要先判断 购物车里面 是否已经有该商品，如果有，只需要改一个商品数量，没有push一个
            state.car.some(item=>{
                if(item.id==goodcar.id){
                    item.count += parseInt(goodcar.count)
                    flge = true
                    return true
                }    //循环 state.car 每一项。找到相同的 就跳出啊
            })

            if(!flge){
                state.car.unshift(goodcar)
            }

            //   对于 vuex 里面存储的 数据 只能在当前页面中显示，每当 属性页面 就会释放数据 ，所以要把数据放在 本地存储里面
            localStorage.setItem("car",JSON.stringify(state.car))

        },
        changegoodsnum(state,gid){
            state.car.some(item=>{
                if(item.id == gid.id){
                    item.count = parseInt(gid.count)
                }
                localStorage.setItem("car",JSON.stringify(state.car))
            })
        },
        // 标签 a 删除 数据
        removegoods(state,id){
            state.car.some((item,i)=>{
                if(item.id == id){
                    state.car.splice(i,1)
                }
            })
            // 删除 当前 元素时，也要相对应的保存在 localStorage 中
            localStorage.setItem("car",JSON.stringify(state.car))
        },
        updateGoodsSelect(state,obj){
            state.car.some(item=>{
                if(item.id==obj.id){
                    //  由此 可以看出 传递过来的 对象  有两个参数 id ,selected ,值 分别是 调用时 传递过来的参数
                    item.selected = obj.selected
                }
            })
            localStorage.setItem("car",JSON.stringify(state.car))
        }
    },
    getters:{
        // getters 是对 state里面数据进行筛选，然后 用户可以直接调用，
        // 相当于 计算属性 ，每当getters里面函数 参数 发生变化时，会自动调用，该函数
        // 也相当于 过滤器 ，  this.$store.getters.函数名

        carzong:function(state){
            var c = 0
            state.car.forEach(item=>{
                c += item.count
            })
            return c
        },

        // 获取每组 商品的 id 和 数量
        getGoodCount:function(state){
            var o = {}
            state.car.forEach(item=>{
                o[item.id]=item.count
            })
            return o    
        },
        // 将 car里面 选中 状态同步到 购物车 页面
        getGoodsSelect(state){
            // 因为是把  car 数组 里面 所有的 状态选项 渲染到页面 ，所以需要 循环遍历出所有状态 再渲染
            var o ={}
            state.car.forEach(item=>{
                o[item.id]=item.selected
            })
            return o
        },

        // 根据 商品 的 选中 状态 来计算用户 选中 了 多少商品 以及总价
        getGoodsPrice(state){
            var o = {
                jian:0,
                Zprice:0
            }
            state.car.forEach(item=>{
                if(item.selected){
                    o.jian += item.count
                    o.Zprice += parseInt(item.count) * parseInt(item.price)
                }
            })
            return o
        }
    }
})

// 引入 router.js,获取路由
import router from "./router.js"

import tabbar from "./components/tabbar.vue"

//  导入vue-resource 数据请求包 
import VueResource from "vue-resource"

// 将VueResource 安装到 Vue中
Vue.use(VueResource);

// 将 发送请求的时候 设置根请求
Vue.http.options.root = 'http://www.liulongbin.top:3005';
// 全局设局 post 提交时候 的 表单数据 格式
Vue.http.options.emulateJSON = true;

// 全局设置 缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

var vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    render: c => c(App),
    router,
    store
})